import React, { Component } from "react";

export default class CommentInput extends Component {
  state = {
    content: "",
  };

  updateContent = (e) => {
    const value = e.target.value.trim();
    if (value.length <= 100) {
      this.setState({ content: value });
    }
  };

  handleClick = () => {
    // 需要把输入的内容提交给App组件去做添加
    if (this.state.content) {
      this.props.addComment(this.state.content);
      this.setState({ content: "" });
    }
  };

  render() {
    return (
      <>
        <h3 className="comm-head">评论</h3>
        <div className="comm-input">
          <textarea
            placeholder="爱发评论的人，运气都很棒"
            value={this.state.content}
            onChange={this.updateContent}
          ></textarea>
          <div className="foot">
            <div className="word">{this.state.content.length}/100</div>
            <div className="btn" onClick={this.handleClick}>
              发表评论
            </div>
          </div>
        </div>
      </>
    );
  }
}
